<template>
  <div class="main">
    <div id="container"></div>
    <!-- <ImagePlayer
        @handle-play="handlePlay"
        v-model:progressValue="progressValue"
        v-model:maxTime="maxTime"
        :marksArr="marksArr"
      /> -->
    <HotLegend :hotLegendColor="hotLegendColor" />
    <ToolBar @change-mode="changeMode" />
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import ToolBar from "./components/toolBar.vue";
import HotLegend from "./components/HotLegend.vue";
import { getForecastData } from "@/api/weather.js";

import { hotLegendColors } from "./constants";
import { modeList, transformWeaterValue } from "./components/data";

let map = null;
let hotLegendColor = ref();
let mode = ref(modeList[0].value); //图层类型
const queryParams = ref({
  weather_vars: "temperature",
});
const urlList = ref();
const timeList = ref();
const flat = ref(1);
const initMap = () => {
  window._AMapSecurityConfig = {
    securityJsCode: "cc51a53899ca787e1a37b886924cf4a1",
  };
  AMapLoader.load({
    key: "a593214aba02306a0b5b46212419b8f4",
    version: "2.0",
    plugins: [],
  })
    .then(async (AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 5.8, // 初始化地图级别
        zooms: [5.8, 11],
        center: [104.305335, 32.5571], // 初始化地图中心点位置
      });
      //限制地图显示范围
      lockMapBounds();
      // 获取瓦片数据
      await getUrlData();
      // 放置url到地图上
      setTileLayerList();
      // 给地图实例绑定点击事件 onClick
      map.on("click", onClick);
    })
    .catch((e) => {
      console.log(e);
    });
};
// 声明点击事件的回调函数
function onClick(e) {
  console.log("回调函数", e);
}
//限制地图显示范围
function lockMapBounds() {
  var bounds = new AMap.Bounds([135.775305, 53.910741], [73.151995, 17.053745]);
  map.setLimitBounds(bounds);
}

//  放置url到地图上
const setTileLayerList = async () => {
  console.log("放置切片图层", urlList.value[0]);
  if (flat.value > 1) {
    let oldLayer = "";
    Object.entries(map.getLayers()).forEach(([key, value]) => {
      if (value.CLASS_NAME === "AMap.TileLayer") {
        oldLayer = value;
      }
    });
    map.remove(oldLayer);
  }
  var layer = new AMap.TileLayer({
    // 图块取图地址
    getTileUrl: urlList.value[0],
    opacity: 0.8,
  });
  map.add(layer);
  flat.value++;
};

//点击图标，更改图层
const changeMode = async (val) => {
  // ImageMapLayer.getInstance().removeAllImageLayer(); //add的时候会去删除比较丝滑的删除，这里就不用了
  console.log("点击了icon", val);
  mode.value = val;
  queryParams.value.weather_vars = modeList.find((v) => v.value == val).param;
  await getUrlData();
  setTileLayerList();
  hotLegendColor.value = {
    ...hotLegendColors?.[transformWeaterValue(val)],
    unit: modeList.find((v) => v.value == val).unit,
  };
};

// 获取切片数据
const getUrlData = async () => {
  const res = await getForecastData(queryParams.value);
  // 转换data格式
  urlList.value = Object.values(res.data.data);
  urlList.value.forEach((value, index) => {
    urlList.value[index] = value
      .replace(/0.0.0.0/g, "test-nw.aienertech.cn")
      .replace(/\/{z}\/{x}\/{y}.png/g, "?z=[z]&x=[x]&y=[y]");
  });
  timeList.value = Object.keys(res.data.data);
  console.log("接口数据");
};

//   渲染地图
onMounted(() => {
  initMap();
});

onUnmounted(() => {
  map?.destroy();
});
</script>
<style scoped>
#container {
  width: 100%;
  height: 90vh;
}
</style>
